﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="library/css/reset.css" />
    <link type="text/css" rel="stylesheet" href="library/css/smoothness/jquery-ui-1.9.1.custom.css" />
    <link type="text/css" rel="stylesheet" href="library/css/style.css" />
    
    <script language="javascript" type="text/javascript" src="library/js/jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="library/js/jquery-ui-1.9.1.custom.js"></script>

    <script language="javascript" type="text/javascript" src="library/js/QlikViewMashups.js"></script>


    <script language="javascript" type="text/javascript">


        $(function () {

            if (IsOffline()) {

                loadJs(qvAjaxLib_Url, qvAjaxLoaded);

                function qvAjaxLoaded() {

                    var qvDoc;
                    Init = function () {
                        qvDoc = Qv.GetCurrentDocument();

                        // Ensure that at all selection are cleared
                        qvDoc.Clear();
                    }

                    Qv.InitWorkBench({
                        View: 'Sales Compass',

                        // Instead of using "Host: 'Local'", use "Host: null"
                        Host: null, 

                        // Trigger Onload function
                        BodyOnLoadFunctionNames: ['Init']
                    });

                }
            }
            else {
                $("#divOutput").empty();
                $("#divOutput").html("<img src='library/images/DivIntegration_03.png'>");
                $("#divOutput").css('cursor', 'pointer');
                $("#divOutput").click(function () {
                    OfflineMsg();
                });
            }

        });


    </script>
    <style type="text/css">
    .QvInlineObject 
    {
        position:relative;
        margin-left:10px;
        margin-right:10px;
        float:left;
    }
    html 
    {
        overflow:hidden;
        padding:10px 10px 10px 10px;
    }
    </style>
</head>
<body>

        <h2 class="hidden" id="demo_title">Clear Existing Selections After Loading Objects</h2>
        <div id="demo_description" class="hidden">
            This example loads two objects from a single QlikView document.<br />
            In comparison to example one we force to clear any existing selections for this document.
        </div>

        <div id="divOutput">
        <div class="QvInlineObject" avqview="Sales Compass" avq="object:.Document\LB5732"
            id="Document\LB5732" style="height: 100px; width: 150px;" >
        </div>
        <div class="QvInlineObject" avqview="Sales Compass" avq="object:.Document\CH351"
            id="Document\CH351" style="width: 300px; height: 250px;">
        </div>
        </div>

        <div id="demo_code_header" class="hidden">
        <p>
            Javascript code placed in the header of the Html file to initialize the QlikView-object(s).
        </p>
            <pre class="wrapped">
            var qvDoc;<br />
            Init = function () {<br />
                &nbsp;&nbsp;&nbsp;qvDoc = Qv.GetCurrentDocument();<br />
                <br />
                &nbsp;&nbsp;&nbsp;// Ensure that at all selection are cleared<br />
                &nbsp;&nbsp;&nbsp;<span class="redBold">qvDoc.Clear()</span>;<br />
            }<br />
            <br />
            Qv.InitWorkBench({<br />
                &nbsp;&nbsp;&nbsp;View: 'Sales Compass',<br />
                <br />
                &nbsp;&nbsp;&nbsp;// Instead of using "Host: 'Local'", use "Host: null"<br />
                &nbsp;&nbsp;&nbsp;Host: null, <br />
                <br />
                &nbsp;&nbsp;&nbsp;// Trigger Onload function<br />
                &nbsp;&nbsp;&nbsp;BodyOnLoadFunctionNames: ['Init']<br />
            });<br />
            </pre>
        </div>

        <div id="demo_code_css" class="hidden">
        <pre class="wrapped">
        .QvInlineObject<br /> 
        {<br />
            &nbsp;&nbsp;&nbsp;position:relative;<br />
            &nbsp;&nbsp;&nbsp;margin-left:10px;<br />
            &nbsp;&nbsp;&nbsp;margin-right:10px;<br />
            &nbsp;&nbsp;&nbsp;float:left;<br />
        }<br />
        </pre>
        </div>

        <div id="demo_code_body" class="hidden">
        <p>
        DIV blocks to place the QlikView objects within your webpage.
        </p>
        <div>
            <pre class="wrapped">
            &lt;!-- Listbox with the Id LB5732 --&gt;<br />
            &lt;div class="QvInlineObject" avqview="Sales Compass" avq="object:.Document\LB5732"&gt;&lt;/div&gt;<br />
            <br />
            &lt;!-- Chart with the Id CH351 --&gt;<br />
            &lt;div class="QvInlineObject"  avqview="Sales Compass" avq="object:.Document\CH351"&gt;&lt;/div&gt;<br />
            </pre>
        </div>
        </div>

</body>
</html>
